getArtCate();

function getArtCate() {
  axios.get("/my/article/cates").then(({ data: { data } }) => {
    // 清空
    // $("tbody").empty();

    // 遍历数组
    // console.log(data);
    const htmlStr = data.map(({ name, alias, Id }) => {
      return `<tr>
                    <td>${name}</td>
                    <td>${alias}</td>
                    <td>
                    <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${Id}">删除</button>
                    </td>
                    </tr>`
    }).join('')
    $('tbody').html(htmlStr)
  });
}


const addFormStr = `<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`
let index = null
$('#btnAddCate').click(function () {
  index = layer.open({
    //   content: $('#addform').html(),
    content: addFormStr,
    type: 1,
    title: '添加文章类别',
    area: ['500px', '300px']
  });
})

$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()

  const data = $(this).serialize()

  axios.post('/my/article/addcates', data).then(({ data: { status } }) => {
    if (status !== 0) return layer.msg('上传失败')

    layer.close(index)
    getArtCate()

    layer.msg('上传成功')
  })
})

const editform = `
<form id="editform" class="layui-form" lay-filter="editform">
<!-- 获取id -->
<div class="layui-form-item layui-hide">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">分类名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
  <label class="layui-form-label">分类别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`
let indexEidt = null
let form = layui.form
$('tbody').on('click', '.btn_edit', function () {
  const Id = $(this).attr('data-id')
  axios.get('/my/article/cates/' + Id).then(({ data: { data } }) => {
    form.val('editform', data)
  })
  indexEidt = layer.open({
    //   content: $('#addform').html(),
    content: editform,
    type: 1,
    title: '修改文章类别',
    area: ['500px', '250px']
  });
})

$('body').on('submit', '#editform', function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post('/my/article/updatecate',data).then(res => {
    getArtCate()
  })
})

$('tbody').on('click','.btn_delete',function(){
  const id = $(this).attr('data-id')
  axios.get('/my/article/deletecate/' + id).then(res => {
    getArtCate()
  }) 
})